<template>
  <div class="hot-search">
    <!-- 头部搜索框 -->
    <div class="search-header">
      <van-search v-model="value" :placeholder="shade.query" show-action @search="onSearch(value)">
        <div slot="action" @click="onSearch(value)" v-if="value">搜索</div>
        <div slot="action" @click="onCancel" v-else="value">取消</div>
      </van-search>
    </div>
    <!-- 热门搜索标签 -->
    <div class="hot-item-list">
      <div class="title">
        <i class="iconfont icon-remen"></i>
        <span>热门搜索</span>
      </div>
      <div class="hot-list">
        <span class="hot-item" @click="onSearch(item)" v-for="item in items">{{item}}</span>
      </div>
    </div>
    <!-- 搜索返回列表 -->
    <suggest :query="value" v-if="value"></suggest>
  </div>
</template>

<script>
import suggest from "./suggest";
import axios from "axios";
export default {
  components: {
    suggest
  },
  data() {
    return {
      value: null,
      shade: {},
      items: []
    };
  },
  methods: {
    onSearch(val) {
      this.$router.push({
        path: "/search_result",
        query: {
          search_key: val
        }
      });
    },
    initData() {
      axios.get("/search_hotquery?pdduid=5533204118409").then(res => {
        this.items = res.data.items;
        this.shade = res.data.shade;
      });
    },
    onCancel() {
      this.$emit("onCancel");
      this.$router.push({ path: "/search" });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.hot-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  .hot-item-list {
    height: 100%;
    background-color: white;
    padding: 0.22rem 0.15rem;
    .title {
      font-size: 0.15rem;
      color: #9c9c9c;
      margin-bottom: 0.04rem;
      i {
        margin-right: 0.06rem;
      }
    }
    .hot-list {
      .hot-item {
        display: inline-block;
        padding: 0 0.15rem;
        margin: 0.08rem 0.08rem 0 0;
        border-radius: 0.16rem;
        background-color: #f9f9f9;
        color: #58595b;
        height: 0.32rem;
        line-height: 0.32rem;
      }
    }
  }
}
</style>

